<script setup lang="ts" name="PanelErrors">
import { mapState } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { isErrorSupported, getError, updateEventDefinition, getCurrentError } from '../../utils/bpmnPropertyUtils/eventDefinition'
import EventEmitter from '@/utils/EventEmitter'
import GlobalReference from '../GlobalReference/index.vue'
import { getGlobalReferenceOptions } from '../../utils/globalReference'

const errorId = ref('')

const mapStates = computed(() => {
  return mapState(useModelerStore, ['getActive'])
})

const globalErrorOptions = ref([])

const GlobalReferenceChange = () => {
  globalErrorOptions.value = getGlobalReferenceOptions(mapStates.value.getActive(), 'bpmn:Error')
}

const errorChange = (v) => {
  if (v) {
    const res = getCurrentError(mapStates.value.getActive(), v)
    updateEventDefinition(mapStates.value.getActive(), 'bpmn:Error', {
      id: res.id,
      name: res.name,
      errorCode: res.errorCode,
      errorMessage: res.errorMessage
    })
  } else {
    updateEventDefinition(mapStates.value.getActive(), 'bpmn:Error', undefined)
  }
}

const initData = () => {
  const error = getError(mapStates.value.getActive())
  if (error) {
    errorId.value = error.id
  } else {
    errorId.value = ''
  }
  console.log(error, '当前错误')
  GlobalReferenceChange()
}

const eventEmitterListener = () => {
  if (isErrorSupported(mapStates.value.getActive())) {
    initData()
  }
}

onBeforeUnmount(() => {
  EventEmitter.removeListener('element-update', eventEmitterListener)
})

onMounted(() => {
  initData()
  EventEmitter.on('element-update', eventEmitterListener)
})
</script>

<template>
  <el-collapse-item name="panel-errors">
    <template #title>
      <div class="collapse-header">
        <svg-icon icon="ri:bug-fill"></svg-icon>
        <h2>错误</h2>
      </div>
    </template>
    <el-form-item label="错误名称">
      <el-select v-model="errorId" clearable @change="errorChange">
        <el-option v-for="item in globalErrorOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <GlobalReference class="field-content" type="error" @change="GlobalReferenceChange">
        <el-divider>
          <div class="divider-panel">
            <svg-icon icon="ri:error-warning-line"></svg-icon>
            <span>全局错误参考列表</span>
          </div>
        </el-divider>
      </GlobalReference>
    </el-form-item>
  </el-collapse-item>
</template>

<style scoped lang="scss">
.el-collapse-item {
  :deep(.el-collapse-item__header) {

    .collapse-header {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0 12px;

      .el-icon {
        margin-right: 6px;
        font-size: 20px !important;
      }

      h2 {
        flex: 1;
        font-weight: bold;
        font-size: 14px;
      }

      .el-button {
        margin-left: 12px;
      }
    }

    .el-icon {
      font-size: 18px;
    }
  }

  :deep(.el-collapse-item__content) {
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
  }
}

.el-form-item {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button.add {
      width: 100%;
      margin: 12px 0 0;
    }
  }
}

.divider-panel {
  display: flex;
  align-items: center;

  span {
    margin-left: 6px;
  }
}
</style>
